<template>
<div class="item-container-div" :class="{ 'background-end':conversation02.serviceStatus==2 }">
  <div
      class="conversation-item-container"
      :class="{ 'choose': conversation.conversationID === currentConversation.conversationID , 'background-end':conversation02.serviceStatus==2 }"
      @click="selectConversation"
  >
    
      <avatar :src="avatar" :type="conversation.type" :classname="'width-96'" />
      <div class="content">
        <div class="row-1">
          <div class="name">
            <div class="text-ellipsis">
              <span :title="conversation.userProfile.nick || conversation.userProfile.userID"
                v-if="conversation.type ===  TIM.TYPES.CONV_C2C"
                >{{conversation.userProfile.nick || conversation.userProfile.userID}}
              </span>
              <span :title="conversation.groupProfile.name || conversation.groupProfile.groupID"
                v-else-if="conversation.type ===  TIM.TYPES.CONV_GROUP"
                >{{conversation.groupProfile.name || conversation.groupProfile.groupID}}
                <!--群名-->
              </span>
              <span
                v-else-if="conversation.type === TIM.TYPES.CONV_SYSTEM"
                >系统通知
              </span>
            </div>
            <div class="conver-label group-label label-disabled" v-if="conversation02.serviceStatus==2&&false&&conversation.type === TIM.TYPES.CONV_C2C"><span>已结束</span></div>
            <div class="conver-label" v-else-if="conversation.type === TIM.TYPES.CONV_C2C&&conversation02.mgrIdentityType"><span>{{conversation02.mgrIdentityType | filhealthManagerType}}</span></div>
            <template v-else-if="conversation.type === TIM.TYPES.CONV_GROUP">
              <div class="conver-label group-label" v-if="conversation02.serviceStatus==1"><span>{{conversation02.nowDay}}/{{conversation02.totalDay}}天</span></div>
              <div class="conver-label group-label label-disabled" v-else-if="conversation02.serviceStatus==2&&false"><span>已结束</span></div>
              <div class="conver-label group-label" v-else-if="conversation02.serviceStatus==0"><span>未开始</span></div>
            </template>
          </div>
          <div class="date">
            {{date}}
          </div>
        </div>
        <div class="row-2">
          <div class="summary">
            <template v-if="conversation.lastMessage">
              <span class="remind" v-if="hasMessageAtMe">[有人@我]</span>
              <span :title="conversation.lastMessage.messageForShow">
                {{messageForShow}}
              </span>
            </template>
          </div>
          <div class="unread-count" v-if="showUnreadCount">
            {{conversation.unreadCount > 99 ? '99+' : conversation.unreadCount}}
          </div>
        </div>
      </div>
  </div>
</div>
</template>

<script>
import { mapGetters, mapState } from 'vuex'
import { isToday, isThisYear, getDate,getMonthDay, getTime } from '@/utils/date'
export default {
  name: 'conversation-item',
  props: {
    conversation: {
      type: Object,
      required: true,
      default: {}
    },
    converList02: {
      type: Object,
      required: true,
      default: {}
    },
  },
  data() {
    return {
      popoverVisible: false,
      // hasMessageAtMe: false
    }
  },
  computed: {
    conversation02() {
      var conversation02 = {};
      if(this.conversation.type=='GROUP'){
        if(!this.converList02[this.conversation.conversationID]){
          conversation02.nowDay=0;
          conversation02.totalDay=0;
          conversation02.serviceStatus=1000;
        }else{
          conversation02=this.converList02[this.conversation.conversationID];
        }
      }else if(this.conversation.type=='C2C'){
        conversation02=this.converList02[this.conversation.conversationID]||{};
      }
      return conversation02;
    },
    showUnreadCount() {
      // if (this.$store.getters.hidden) {
      //   return this.conversation.unreadCount > 0
      // }
      // 是否显示未读计数。当前会话和未读计数为0的会话，不显示。
      return this.conversation.unreadCount > 0
    },
    date() {
      if (
        !this.conversation.lastMessage ||
        !this.conversation.lastMessage.lastTime
      ) {
        return ''
      }
      const date = new Date(this.conversation.lastMessage.lastTime * 1000)
      if (isToday(date)) {
        return getTime(date)
      }
      if(isThisYear(date)) {
        return getMonthDay(date)
      }
      return getDate(date)
    },
    avatar: function() {
      switch (this.conversation.type) {
        case 'GROUP':
          return this.conversation.groupProfile.avatar
        case 'C2C':
          return this.conversation.userProfile.avatar
        default:
          return ''
      }
    },
    conversationName: function() {
      if (this.conversation.type === this.TIM.TYPES.CONV_C2C) {
        return this.conversation.userProfile.nick || this.conversation.userProfile.userID
      }
      if (this.conversation.type === this.TIM.TYPES.CONV_GROUP) {
        return this.conversation.groupProfile.name || this.conversation.groupProfile.groupID
      }
      if (this.conversation.type === this.TIM.TYPES.CONV_SYSTEM) {
        return '系统通知'
      }
      return ''
    },
    showGrayBadge() {
      if (this.conversation.type !== this.TIM.TYPES.CONV_GROUP) {
        return false
      }
      return (
        this.conversation.groupProfile.selfInfo.messageRemindType ===
        'AcceptNotNotify'
      )
    },
    messageForShow() {
      if (this.conversation.lastMessage.isRevoked) {
        if (this.conversation.lastMessage.fromAccount === this.currentUserProfile.userID) {
          return '你撤回了一条消息'
        }
        if (this.conversation.type === this.TIM.TYPES.CONV_C2C) {
          return '对方撤回了一条消息'
        }
        return `${this.conversation.lastMessage.fromAccount}撤回了一条消息`
      }
      //兼容客户端艾特用户
      try{
        if(this.conversation.lastMessage.type == 'TIMCustomElem'&&JSON.parse(this.conversation.lastMessage.payload.data).content&&typeof JSON.parse(this.conversation.lastMessage.payload.data).content=='string'){
          return JSON.parse(this.conversation.lastMessage.payload.data).content;
        }
      }catch(e){}
      return this.conversation.lastMessage.messageForShow
    },
    ...mapState({
      currentConversation: state => state.conversation.currentConversation,
      currentUserProfile: state => state.user.currentUserProfile,
      atmeMesssage: state => state.conversation.atmeMesssage
    }),
    ...mapGetters(['toAccount']),
    hasMessageAtMe(){
      return this.atmeMesssage[this.conversation.conversationID]||false
    }
  },
  mounted() {
    var self = this;
    // this.$bus.$on('new-messsage-at-me', event => {
    //   if (
    //     event.data.conversationID === this.conversation.conversationID &&
    //     this.conversation.conversationID !==
    //       this.currentConversation.conversationID
    //   ) {
    //     this.hasMessageAtMe = true
    //   }
    // })
  },
  methods: {
    selectConversation() {
      // if (this.conversation.conversationID !== this.currentConversation.conversationID) {
        // this.$store.dispatch(
        //   'checkoutConversation',
        //   this.conversation.conversationID
        // )
        // this.$store.commit('removeAtmeMesssage',this.conversation.conversationID)
        // if(this.conversation02.serviceStatus==2){
        //   return ;
        // }
        this.$setCookie('gochat',1)
        this.$router.push({
          path: '/im/chat',
          query: {
            conversationid: this.conversation.conversationID,
            status: this.conversation02.serviceStatus,
            isNewTab: this.$route.query.isNewTab,
            isIphoneX: this.$route.query.isIphoneX
          }
        })
      // }
    },
    showContextMenu() {
      this.popoverVisible = true
    },
  },
  watch: {
    // currentConversation(next) {
    //   if (next.conversationID === this.conversation.conversationID) {
    //     this.hasMessageAtMe = false
    //   }
    // }
  },
  filters: {
    filhealthManagerType(data){
      var dataName='';
      if(data==1){
        dataName='健康管理师';
      }else if(data==2){
        dataName='医生';
      }else if(data==3){
        dataName='营养咨询师';
      }else if(data==4){
        dataName='心理咨询师';
      }else if(data==5){
        dataName='身心疗愈师';
      }else if(data==6){
        dataName='运动医学专家';
      }else if(data==7){
        dataName='健康督导师';
      }else{
        dataName='';
      }
      return dataName;
    }
  }
}
</script>

<style lang="scss" scoped>
.item-container-div{
  width: 100vw;
  margin-left: -.493333rem;
  padding: 0 .493333rem;
  &.background-end{
    background: #F7F7F7;
  }
}
.conversation-item-container{
  width: 100%;
  height: 2.133333rem;
  border-bottom: solid 1px rgba($color: #000000, $alpha: 0.06);
  padding: .373333rem 0 0 1.453333rem;
  position: relative;
  .width-96{
    position: absolute;
    top: .426667rem;
    left: 0;
  }
  .content{
    width: 100%;
    .row-1{
      width: 100%;
      // padding-right: 2.16rem;
      position: relative;
      height: .64rem;
      display: flex;
      padding-right: 2rem;
      margin-bottom: .106667rem;
      .date{
        height: .64rem;
        display: flex;
        align-items: center;
        font-size: .346667rem;
        color: #7D7D7D;
        position: absolute;
        right: 0;
        top: 0;
      }
      .name{
        display: flex;
        align-items: center;
        width: 100%;
        .text-ellipsis{
          flex: 0 1 auto;
          font-size: .4rem;
          color: #3D3D3D;
          margin-right: .2rem;
          @include ellipsis();
        }
        .conver-label{
          display: flex;
          align-items: center;
          flex-shrink: 0;
          padding: 0 .2rem;
          height: .453333rem;
          font-size: .32rem;
          color: white;
          background: #A49272;
          border-radius: .261333rem;
          &.group-label{
            background: $acolor;
          }
          &.label-disabled{
            background: #999;
          }
        }
      }
    }
    .row-2{
      width: 100%;
      height: .64rem;
      padding-right: .56rem;
      position: relative;
      display: flex;
      align-items: center;
      .summary{
        width: 100%;
        font-size: .346667rem;
        color: #7D7D7D;
        @include ellipsis();
        .remind{
          color: red;
          margin-right: .04rem;
        }
      }
      .unread-count{
        position: absolute;
        right: 0;
        top: .14rem;
        min-width: .36rem;
        height: .36rem;
        color: white;
        background: #f35f5f;
        border-radius: .18rem;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: .24rem;
      }
    }
  }
}
</style>
